import { Image, Button, Popconfirm } from "antd"
import { EditOutlined, DeleteOutlined } from "@ant-design/icons"

const getColumns = (handleEdit, handleDelete): Record<string, any>[] => [
  {
    title: "商品名称",
    dataIndex: "name",
    align: "center",
    width: "7vw"
  },
  {
    title: "商品价格",
    dataIndex: "price",
    align: "center",
    width: "7vw"
  },
  {
    title: "商品图片",
    dataIndex: "pic",
    align: "center",
    width: "20vw",
    render: (text: Record<string, any>, record: Record<string, any>) => {
      return (
        <div>
          <Image src={record.pic}
            height={150}
            fallback=""
          >
          </Image>
        </div>
      )
    }
  },
  {
    title: "商品数量",
    dataIndex: "count",
    align: "center",
    width: "7vw"
  },
  {
    title: "商品描述",
    dataIndex: "description",
    align: "center",
  },
  {
    title: "操作",
    align: "center",
    width: "15vw",
    render: (rowData: Record<string, any>) => {
      return (
        <div>
          <Button icon={<EditOutlined />} style={{ marginRight: '5px' }} onClick={() => handleEdit(rowData)}></Button>
          <Popconfirm title="提示" description="此操作将删除该用户, 是否继续?" okText="确认"
            cancelText="取消" onConfirm={() => handleDelete(rowData)}>
            <Button icon={<DeleteOutlined />} type="primary" danger>删除</Button>
          </Popconfirm>
        </div>
      )
    }
  },
]

export { getColumns }
